<template>
    <div class="detail-main ">
        <mt-header title="订单详情">
        <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
        </mt-header>
         <div class="container"  >
              <div class="status">
                    <div class="symbol">
                        <div class="flex-between">
                            <span class="type" v-if="type==0">买入USDT</span>
                             <span class="type" v-if="type==1">卖出USDT</span>
                            <span class="type">{{payment}}</span>
                        </div>
                         <div class="flex-between">
                            <span class="wait">订单编号：{{detailInfo?detailInfo.orderNum:''}}</span>
                            <span class="wait" v-if="status!=4 && status!=5&&status!=2">{{minute}}分{{seconds}}秒</span>
                         </div>
                    </div>
              </div>
              <div class="describe"  >
                    <div class="flex-between">
                        <span class="left">真实姓名</span>
                         <span class="right">{{realName}}</span>
                    </div>
                     <div class="flex-between">
                        <span class="left">手机号</span>
                         <span class="right" style="color:#5298F1">{{telephone}}</span>
                    </div>
                     <div class="flex-between">
                       <span class="left">交易金额(CNY)</span>
                         <span class="right">{{(otcOrder.price * (detailInfo?detailInfo.amount:'')).toFixed(2)}}<img @click="copy((otcOrder.price * (detailInfo?detailInfo.amount:'')).toFixed(2))" src="../../assets/note.png"></span>
                    </div>
                     <div class="flex-between">
                        <span class="left">单价(CNY)</span>
                         <span class="right">{{otcOrder.price}}</span>
                    </div>
                     <div class="flex-between">
                        <span class="left">数量(USDT)</span>
                         <span class="right">{{detailInfo?detailInfo.amount:''}}</span>
                    </div>
                     <div class="flex-between">
                        <span class="left">付款参考号</span>
                         <span class="right">{{detailInfo?detailInfo.paymentNum:''}}</span>
                    </div>
              </div>
              <div class="pay-type" >
                  <div class="pay-tab">
                      <span class="ail-pay-type">付款方式</span>
                      <div class="bank-type">
                          <img v-if="payWay2==2&&payWayType2==2&&bankNamePayShow"   src="../../assets/weiway.png">
                             <div v-if="payWay2==2&&payWayType2!=2&&bankNamePayShow " class="way-img wei-pay"><img  @click="chatShow()"  src="../../assets/weixin.png">  </div>
                        <img v-if="payWay3==1 &&payWayType3==1&&aliAccountPayShow"  src="../../assets/zfbway.png">
                        <div  v-if="payWay3==1&&payWayType3!=1&&aliAccountPayShow"  class="way-img zfb-pay"><img  @click="aliShow()" src="../../assets/zfbway.png">  </div>
                        <img v-if="payWay1==0 &&payWayType1==0&&wechatAccountPayShow"  src="../../assets/bankway.png">
                       <div v-if="payWay1==0&&payWayType1!=0&&wechatAccountPayShow" class="way-img bank-pay"> <img  @click="bankShow()" src="../../assets/bankway.png">  </div>
                      </div>
                  </div>
              </div>
              <div class="footer" v-if="status!=2">
                  <div class="notice">
                      <div>交易备注</div>
                        <div>{{otcOrder.otcRemarks}}</div>
                  </div>
                  <section class="btn flex-start-center" v-if="status==0&&type==0">
                        <div to="over" class="cancel-button" @click="handleBtnClose()">取消订单</div>
                        <div to="over" class="sure-button" v-on:click="otcPayBtn()">我已付款</div>
                    </section>
                    <section class="btn flex-all-center" v-if="status==0&&type==1">
                        <div to="over" class="cancel-wait-button" >请等待对方付款</div>
                    </section>
                    <section class="btn flex-all-center" v-if="status==1&&type==1">
                        <!-- <button style="width: 40%;"  disabled class="apply-button" @click="otcApply()">平台申诉</button> -->
                              <div style="width: 40%;" to="over" class="sure-button" @click="otcSend()">确定放币</div>
                    </section>
                     <section class="btn flex-all-center" v-if="status==1&&type==0">
                        <div to="over" class="cancel-wait-button" >请等待对方放币</div>
                    </section>
                    <section class="btn flex-all-center" v-if="status==3">
                        <div to="over" class="cancel-btn" >该订单已撤销</div>
                    </section>
                     <section class="btn " v-if="status==5">
                          <div   class="flex-all-center">
                             <div to="over" class="cancel-wait-button">请等待客服处理</div>
                         </div>
                    </section>
                     <section class="btn " >
                         <div v-if="status==4&&type==0"  class=" flex-all-center">
                             <div  class="apply-button" @click="otcApply()">平台申诉</div>
                         </div>
                         <div  v-if="status==4&&type==1" class="flex-between">
                             <div style="width: 40%;"  class="apply-button" @click="otcApply()">平台申诉</div>
                              <div style="width: 40%;" to="over" class="sure-button" @click="otcSend()">确定放币</div>
                         </div>
                    </section>
                    <div class="notice">
                      <div>注意事项：</div>
                        <div style="font-size:24px" v-if="type==0">
                            <span>1，请务必使用实名为({{myName}})的账户向商家转账，且要备注付款参考号。</span>
                            <span>2，在转账过程中请勿备注BTC、USDT、交易所等信息，防止造成您的付款被 拦截，银行卡被冻结等后果，因此到账延时，商家可拒绝成交。</span>
                            <span>3，请您在倒计时结束前完成付款，否者系统会自动取消当前订单。</span>
                        </div>
                        <div>
                              <div style="font-size:24px" v-if="type==1">
                            <span>1，请务必确认收到实名为({{myName}})的付款信息。 </span>
                            <span>2，请您在倒计时结束前完成放币，否则系统对该订单进行冻结处理。</span>
                        </div>
                        </div>
                  </div>
              </div>
        </div>
         <elDialog v-model="sendVal" type="danger" title="银行卡信息"  v-on:cancel="clickCancel()" @danger="clickDanger()" @confirm="clickConfirm()" dangerText="Delete">
                <span slot="content" class="dialog-footer">
                    <div class="flex-between flex-row log-people">
                        <span class="people">收款人</span>
                        <span>{{name}}<img @click="copy(name)" src="../../assets/note.png"></span>
                    </div>
                  <div class="flex-between flex-row log-people">
                        <span class="people">开户行</span>
                        <span>{{bankName}}<img @click="copy(bankName)" src="../../assets/note.png"></span>
                    </div>
                     <!-- <div class="flex-between flex-row log-people">
                        <span class="people">支行</span>
                        <span><img  src="../../assets/note.png"></span>
                    </div> -->
                    <div class="flex-between flex-row log-people">
                        <span class="people">卡号</span>
                        <span>{{bankAccount}}<img  @click="copy(bankAccount)" src="../../assets/note.png"></span>
                    </div>
                </span>
                 <span slot="footer" class="pay-footer" @click="payWayBtn(0)">
                     选定银行卡付款
                 </span>
            </elDialog>
             <elDialog v-model="chatSendVal" type="danger"  title="微信信息" >
                <span slot="content" class="dialog-footer">
                      <div class=" flex-row log-people-chat">
                       <img @click="wechatVish()" v-bind:src="wechatUrl" :class="wechatUrlShow?'log-img-ween':''" >
                    </div>
                  <div class="flex-between flex-row log-people">
                        <span class="people">姓名</span>
                        <span>{{name}}<img @click="copy(name)" src="../../assets/note.png"></span>
                    </div>
                     <div class="flex-between flex-row log-people">
                        <span class="people">账户</span>
                        <span>{{wechatAccount}}<img @click="copy(wechatAccount)"  src="../../assets/note.png"></span>
                    </div>
                </span>
                 <span slot="footer" class="pay-footer" @click="payWayBtn(2)">
                     选定微信付款
                 </span>
            </elDialog>
            <elDialog v-model="aliSendVal" type="danger"  title="支付宝信息" >
                <span slot="content" class="dialog-footer">
                      <div class=" flex-row log-people-chat">
                       <img @click="aliUrlVish()" v-bind:src="aliUrl" :class="aliUrlShow?'log-img-ween':''">
                    </div>
                  <div class="flex-between flex-row log-people">
                        <span class="people">姓名</span>
                        <span>{{name}}<img  @click="copy(name)" src="../../assets/note.png"></span>
                    </div>
                     <div class="flex-between flex-row log-people">
                        <span class="people">账户</span>
                        <span>{{aliAccount}}<img @click="copy(aliAccount)" src="../../assets/note.png"></span>
                    </div>
                </span>
                 <span slot="footer" class="pay-footer" @click="payWayBtn(1)">
                     选定支付宝付款
                 </span>
            </elDialog>
            <div class="elDialog-img">
                <img src="../../assets/down.png" class="down-img" alt="" v-if="wechatUrlShow" @click="downPay()">
                <img src="../../assets/down.png" class="down-img" alt="" v-if="aliUrlShow" @click="downPayAli()">
            </div>
     </div>
</template>
<script>
import Vue from 'vue'
import elDialog from '../../components/dialog/dialog';
import { Toast } from 'mint-ui';
import { MessageBox,Indicator } from 'mint-ui';
import {
	address,
} from '../../../src/service/getData'
export default {
  name: 'detail',
  components: {elDialog},
  data () {
    return {
         sendVal: false,
         chatSendVal:false,
         aliSendVal:false,
      detailInfo:null,
      realName:'',
      telephone:'',
      otcOrder:'',
      type:null,
      payment:'',
      status:null,
      bankName:'',
      bankBranch:'',
      name:'',
      bankAccount:'',
      payWay1:null,
      payWay2:null,
      payWay3:null,
      payWayType2:null,
       payWayType3:null,
       payWayType1:null,
      wechatUrl:'',
      aliUrl:'',
      wechatAccount:'',
      aliAccount:'',
      choosePayWay:-1,
       minute:'',
       seconds:'',uid:'',
        statusBtn:'',
        myName:"",
        wechatUrlShow:false,
        aliUrlShow:false,
         bankNamePayShow:true,
        aliAccountPayShow:true,
         wechatAccountPayShow:true,
    }
  },
  created() {
       Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
        });
        this.$http.post('/v1/session?' + new Date().getTime(), {}, ).then((data)=>{
                this.uid=data.data.data.id;
                 this.getOtcList();
             })
  },
  mounted() {  
  },
        methods:{
             sideslip(index){
                this.getOtcList();
            },
            downPay(){
            //必须同源才能下载
                // var alink = document.createElement("a");
                // alink.href = this.wechatUrl;
                // alink.download = "pic"; //图片名
                // alink.click();
                 this.createDownload(this.wechatUrl)
            },
             downPayAli(){
            //必须同源才能下载
                // var alink = document.createElement("a");
                // alink.href = this.wechatUrl;
                // alink.download = "pic"; //图片名
                // alink.click();
                this.createDownload(this.aliUrl)
            },
            createDownload(url) {
    /*设置下载路径*/
     let loadUrl = url;
    //设置保存路径
    var relativePath =  "_downloads/" + '/upload/others/'+(new Date()).getTime()+'_BxNIU.png';
    //alert(relativePath);
    plus.io.resolveLocalFileSystemURL(relativePath, function(entry) {
        // Toast("文件已存在," );
        delFile(relativePath)
    }, function(e) {
      //  alert("文件不存在,联网下载=" + relativePath);
        setImgFromNet(loadUrl, relativePath);
    });
 /*给图片标签<img>设置本地图片
         * imgId 图片标签<img>的id
         * relativePath 本地相对路径 例如:"_downloads/logo.jpg"
         */
        function setImgFromLocal(imgId, relativePath) {
                //本地相对路径("_downloads/logo.jpg")转成SD卡绝对路径("/storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/downloads/logo.jpg");
                var sd_path = plus.io.convertLocalFileSystemURL(relativePath);
            }
    function setImgFromNet(loadUrl, relativePath) {
        //创建下载任务
        var dtask = plus.downloader.createDownload(loadUrl, {filename:relativePath}, function(d, status) {
            if(status == 200) {
                //下载成功
                 plus.storage.setItem("relativePath", relativePath); //存储db文件路径名
                  setImgFromLocal('', d.filename);
                plus.gallery.save(relativePath,function() {//保存到相册方法
            Toast('已保存,请到到手机相册查看');
            }, function() {
            Toast('保存失败，请重试！');
            });
            } else {
                //下载失败,需删除本地临时文件,否则下次进来时会检查到文件已存在
              //  Toast("下载失败=" + status + "==" + relativePath);
                if(relativePath != null)
                    delFile(relativePath);
            }
        });
        //启动下载任务
        dtask.start();
    }
    /*删除指定文件*/
    function delFile(relativePath) {
        plus.io.resolveLocalFileSystemURL(relativePath, function(entry) {
            entry.remove(function(entry) {
                setImgFromNet(loadUrl, relativePath);
            }, function(e) {
            });
        });
    }
},
             getOtcList(){
       this.$http.post('v1/getOtcList?', {page: 1,pageSize: 10}).then((res) => {
           let data=res.data;
           let fid;
            if (data.code == 200) {
                    for (var i = 0; i < data.data.length ; i++) {
                        if(data.data[i].fShortName=="OMNI-USDT"){
                            fid=data.data[i].fid;
                        }
                    }
            }
               this.getMyDealOrdes(fid)
      })
    },
      copy(data){
           Toast(data);
             if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
              var input = document.createElement("input");
              input.setAttribute('readonly', 'readonly');
             var message=data;
            input.value = message;
            document.body.appendChild(input);
            input.select();
            input.setSelectionRange(0, input.value.length), document.execCommand('Copy');
            input.style.display='none';
              input.className = 'oInput';
            document.body.removeChild(input);
             input.focus(); 
                 Toast("复制成功");
            }else{
        var Url2=data;
          var oInput = document.createElement('input');
          oInput.setAttribute('readonly', 'readonly');
        oInput.value = Url2;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'oInput';
        oInput.style.display='none';
        Toast("复制成功");
        }
    },
    //  copy(data) {  
    //       Toast("复制成功")
    //     var Url2=data;
    //     var oInput = document.createElement('input');
    //     oInput.value = Url2;
    //     document.body.appendChild(oInput);
    //     oInput.select(); // 选择对象
    //     document.execCommand("Copy"); // 执行浏览器复制命令
    //     oInput.className = 'oInput';
    //     oInput.style.display='none';
    
    //     },
        getMyDealOrdes(uid) {
                    this.$http.post('v1/myDealOtcList', {
                        cid: uid,
                        status: this.$route.query.stat,
                        page: 1,
                        pageSize: 10
                    }).then((res) => {
                        if(res.data.code==200){
                               let self=this;
                        let data=res.data.data;
                            let order,realName,telephone;
                      this.detailInfo=  data.filter(item=>{
                           return item.id==this.$route.query.id
                            })[0];
                         order=this.detailInfo;
                          this.connectWs(order);
                         if(!order){
                              this.payment="已撤销";
                             return;
                         }
                         if(order.status==0){
                             let arr=order.payWay.split(",");
                         for (let i = 0; i < arr.length; i++) {
                             if(arr[i]==0){
                                 this.payWay1=arr[i]
                             }else if(arr[i]==1){
                                 this.payWay3=arr[i]
                             }else if(arr[i]==2){
                                 this.payWay2=arr[i]
                             }
                         }
                         }else if(order.status==1 ||order.status==2 || order.status==4|| order.status==5){
                            if(order.otcPayment=='0'){
                                this.payWay1=0;
                            }else if(order.otcPayment=='1'){
                               this.payWay3=1;
                            }else if(order.otcPayment=='2'){
                               this.payWay2=2;
                            }
                         }
                                // console.log(this.payWay3,this.payWay1,this.payWay2)
                      if ((order.otcOrder.type == 1 && this.uid == order.fuser.fid) || order.otcOrder.type == 0 && this.uid == order.otcOrder.fuser.fid) {
                                if (order.otcOrder.type == 1) {
                                    // this.bankNamePayShow=order.otcOrder.fuser.bankName?true:false;
                                    //  this.aliAccountPayShow=order.otcOrder.fuser.aliAccount?true:false;
                                    //   this.wechatAccountPayShow=order.otcOrder.fuser.wechatAccount?true:false;
                                    realName = order.otcOrder.fuser.frealName;
                                    telephone = order.otcOrder.fuser.ftelephone ? order.otcOrder.fuser.fareaCode + order.otcOrder.fuser.ftelephone : order.fuser.femail;
                                } else {
                                    realName = order.fuser.frealName;
                                    telephone = order.fuser.ftelephone ? order.fuser.fareaCode + order.fuser.ftelephone : order.fuser.femail;
                                }
                                 this.type = 0;
                      }else{
                           if (order.otcOrder.type == 0) {
                                    realName = order.otcOrder.fuser.frealName;
                                    telephone = order.otcOrder.fuser.ftelephone ? order.otcOrder.fuser.fareaCode + order.otcOrder.fuser.ftelephone : order.fuser.femail;
                                } else {
                                    realName = order.fuser.frealName;
                                    telephone = order.fuser.ftelephone ? order.fuser.fareaCode + order.fuser.ftelephone : order.fuser.femail;
                                }
                                this.type = 1;
                      }
                      this.otcOrder=this.detailInfo.otcOrder
                    this.realName=realName;
                    this.telephone=telephone.replace("+86","");
                      this.name = order.otcOrder.type == 1 ? order.otcOrder.fuser.frealName : order.fuser.frealName;
                    // var myName = order.otcOrder.type == 1 ? order.fuser.frealName:order.otcOrder.fuser.frealName;
                        this.bankName = order.otcOrder.type == 1 ? order.otcOrder.fuser.account.bankName : order.fuser.account.bankName;
                        this.bankBranch = order.otcOrder.type == 1 ? order.otcOrder.fuser.account.bankBranch : order.fuser.account.bankBranch;
                        this.bankAccount = order.otcOrder.type == 1 ? order.otcOrder.fuser.account.bankAccount : order.fuser.account.bankAccount;
                        this.aliAccount = order.otcOrder.type == 1 ? order.otcOrder.fuser.account.aliAccount : order.fuser.account.aliAccount;
                     this.wechatAccount = order.otcOrder.type == 1 ? order.otcOrder.fuser.account.wechatAccount : order.fuser.account.wechatAccount;
                   this.wechatUrl =  order.otcOrder.type == 1 ? 'https://biplush.oss-ap-southeast-1.aliyuncs.com/'+order.otcOrder.fuser.account.wechatUrl : 'https://biplush.oss-ap-southeast-1.aliyuncs.com/'+order.fuser.account.wechatUrl;
                    this.aliUrl = order.otcOrder.type == 1 ? 'https://biplush.oss-ap-southeast-1.aliyuncs.com/'+order.otcOrder.fuser.account.aliUrl : 'https://biplush.oss-ap-southeast-1.aliyuncs.com/'+order.fuser.account.aliUrl;
                  this.getDealOrderStatus(order.status, order,uid);
                    Indicator.close();
                        }
                    })
            },
               getDealOrderStatus(status, order,uid) {
                     let nowTime = (new Date().getTime())/1000;
                    let updateTime = parseInt(order.expirationTime)/1000;
                    let restTime = updateTime - nowTime > 0 ? updateTime - nowTime : 0;
                    let time_arr=[];
                     let time=restTime;
                      let self = this;
                      if(time>0){
                     time_arr.push(setInterval(function () {
                            if (time > -1) {
                                time--;
                                self.minute = Math.floor(time / 60);
                                self.seconds = Math.floor(time % 60);
                            } else {
                                clearInterval(time_arr);
                                    self.$router.go(-1);
                            }
                        }, 1000));
                 }
                    let name = order.otcOrder.type == 1 ? order.otcOrder.fuser.frealName : order.fuser.frealName;
                    let myName = order.otcOrder.type == 1 ? order.fuser.frealName:order.otcOrder.fuser.frealName;
                    this.myName=myName.replace(myName.substr(1, 1), '*')?myName.replace(myName.substr(1, 1), '*'):'';
                    switch (status) {
                        case 0:
                            if ((order.otcOrder.type == 1 &&  this.uid == order.fuser.fid) || order.otcOrder.type == 0 &&  this.uid == order.otcOrder.fuser.fid) {
                                   this.payment="待付款";
                            } else {
                                   this.payment="待付款";
                            }
                             this.status=order.status;
                        break;
                        case 1:
                        this.payment="待放币";
                        this.status=order.status;
                        break;
                         case 2:
                        this.payment="已完成";
                        this.status=order.status;
                        break;
                        case 3:
                        this.payment="已撤销";
                        this.status=order.status;
                        break;
                        case 4:
                        this.payment="冻结中";
                         
                        this.status=order.status;
                        break;
                        case 5:
                        this.payment="申诉中";
                         
                        this.status=order.status;
                        break;
                         default:
                    }
                },
                otcPayBtn(){
                    if(this.choosePayWay==-1){
                        Toast("请选择支付方式")
                        return ;
                    }
                    this.$http.post('/v1/account/otcPay', { id: this.detailInfo.id,otcPayment:this.choosePayWay },).then((data)=>{
                        if (data.data.code == 200) {
                           // location.reload();
                               this.getOtcList();
                        } else if (data.data.code == 2) {
                                    Toast({
                            message: '状态已改变，请刷新',
                            duration: 2000
                            });
                            return;
                        } else {
                             Toast({
                            message: '网络出错，请稍后再试',
                            duration: 2000
                            });
                            return;
                        }
                    })
                },
                  /*放币*/
                otcSend(){
                    let self=this;
                      this.$http.post('/v1/account/otcSend', { id: this.detailInfo.id },).then((res)=>{
                          let data=res.data;
                              location.hash = self.$router.history.current.path+'?id='+self.$route.query.id+"&stat=1";
                    if (data.code == 200) {
                         //   location.reload();
                            this.getOtcList();
                        } else if (data.data.code == 2) {
                                    Toast({
                            message: '状态已改变，请刷新',
                            duration: 2000
                            });
                            return;
                        }else if (data.code == 3) {
                            // error_win("您的资金异常，请主动联系平台处理");
                            error_win("您的资金异常，请主动联系平台处理");
                        } else {
                             Toast({
                            message: '网络出错，请稍后再试',
                            duration: 2000
                            });
                            return;
                        }
                      })
                },
                  connectWs(order) {
                   let socket;
                   let socketStatus;
                   let connectWsStatus=false;
                   let self=this;
                   socket && socket.close();
                   let host=address;
                    socket = io('https://'+host+'/otc_order?oid=' + this.$route.query.id+'&fuid='+ this.uid+'&otcAcceId='+order.otcAcceptanceId,{transports: ['websocket', 'pull']});
                    let _on = socket.on;
                    socket.on = function (event, fn) {
                        _on.call(socket, event, function (msg) {
                            fn(msg)
                        })
                    }
                    socket.on('otcOrder', function (msg) {
                       let data= JSON.parse(msg);
                    if(socketStatus!=data.data.status){
                        socketStatus=data.data.status;
                        if(connectWsStatus){
                            if(socketStatus==2){
                                location.hash = self.$router.history.current.path+'?id='+self.$route.query.id+"&stat=1";
                               self.getMyDealOrdes(self.$route.query.stat);
                          }else{
                           self.getMyDealOrdes(self.$route.query.stat);
                          }
                        }
                        connectWsStatus=true;
                       }
                    });
                },
                
                //申诉
                otcApply(){
                       MessageBox({
                    inputType: "textarea",
                    showCancelButton:false,
                    inputPlaceholder:"您的申诉理由是？"
                    });
                      MessageBox.prompt("申诉理由").then(({ value, action }) => {
                    this.$http.post('/v1/account/otcApply', { id: this.$route.query.id, note: value },).then((item)=>{
                         if (item.data.code == 200) {
                                //   location.reload();
                                   this.getOtcList();
                                   } else if (item.data.code == 2) {
                                Toast({
                                     message: '状态已改变，请刷新网页',
                                            duration: 2000
                                   });
                                   } else {
                                      Toast({
                            message: '网络出错，请稍后再试',
                            duration: 2000
                            });
                                 }
                            })
                     })
                },
                payWayBtn(way){
                    this.sendVal=false,
                    this.chatSendVal=false,
                    this.aliSendVal=false,
                    this.choosePayWay=way;
                },
                 wechatVish(){
                    this.wechatUrlShow=!this.wechatUrlShow;
                },
                aliUrlVish(){
                    this.aliUrlShow=!this.aliUrlShow;
                },
                aliShow(){
                    this.aliSendVal=true;
                    this.payWayType3=1;
                     this.payWayType1=null;
                      this.payWayType2=null;
                },
               chatShow(){
                   this.chatSendVal=true;
                   this.payWayType2=2;
                    this.payWayType3=null;
                     this.payWayType1=null;
               },
                bankShow(){
                    this.sendVal=true;
                    this.payWayType1=0;
                    this.payWayType2=null;
                     this.payWayType3=null;
                },
          handleBtnClose(){
                MessageBox.confirm('确定撤销此订单？').then(action => {
                 this.$http.post('/v1/account/cancelOtcPay',{id: this.$route.query.id},).then((data)=>{
                                if(data.data.code==200){
                                         Toast({
                                                message: '撤单成功',
                                                iconClass: 'icon icon-success'
                                                });
                                this.$router.go(-1);
                        }
                })
        });
            },
             handleClose(){
                this.$router.go(-1);
            },
        }
}
</script>

<style lang="less" scoped>
.log-people img {
    width: 26px;
    height: 26px;
}
.down-img{
    position: fixed;
    bottom: 200px;
    right: 50px;
    z-index: 10000;
}
.dialog .dialog-container .log-img-ween{
    width: 540px;
    height: 520px;
    position: absolute;
    margin-top: 150px;
    z-index: 100;
}
.apply-button{
    width: 40%;
    height: 80px;
    color: #fff;
    border-radius: 4px;
    position: relative;
    bottom: 20px;
    text-align: center;
    line-height: 80px;
    border:1px solid rgba(51,129,255,1);
}
.log-people-chat{
    display: flex;
    align-items: center;
    justify-content: center;
}
.log-people-chat img{
    width: 160px;
    height: 160px;
}
.footer{
    padding: 30px;
    .btn{
        margin-bottom: 30px;
    }
    .notice{
        margin-bottom: 60px;
        color: #8686C0;
        line-height: 40px;
    }
    .flex-all-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-start-center{
    display: flex;
    align-items: center;
    justify-content: start;
}

.sure-button{
    width:300px;
    height:80px;
    background:#3381FF;
    border-radius:4px;
    position: relative;
    bottom: 20px;
    text-align: center;
    line-height: 80px;
    color: #fff;
}

.cancel-wait-button{
     width:70%;
height:80px;
background:#222240;
border-radius:4px;
position: relative;
bottom: 20px;
text-align: center;
line-height: 80px;
color: #fff;
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: not-allowed;
    opacity: .65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
}
.cancel-btn-over{
    width:70%;
height:80px;
background:#5298F1;
border-radius:4px;
position: relative;
bottom: 20px;
text-align: center;
line-height: 80px;
font-size: 24px;
color: #fff;

}
.cancel-button{
    width:300px;
    height:80px;
    border:1px solid #5298F1;
    border-radius:4px;
    position: relative;
    bottom: 20px;
    text-align: center;
    line-height: 80px;
    color: #3381FF;
    margin-right: 60px;
}
.cancel-btn{
    width:45%;
height:80px;
background:#f8f9fb;
border:1px solid #3381FF;
border-radius:4px;
position: relative;
bottom: 20px;
text-align: center;
line-height: 80px;
color: #3381FF;
margin-right: 60px;
}
}
.detail-main .container{
    position: absolute;
    margin-top: 50px;
    width: 100%;
}
.describe{
    padding: 30px 30px 0px 30px;
    border-bottom: 2px solid #222240;
}
.pay-type{
border-bottom: 2px solid #222240;
color: #E0E0F9;
padding: 30px;
    .pay-tab{
        height: 80px;
         line-height: 80px;
         flex-direction: row;
         display: flex;
    }
     .ail-pay-type{
         width: 150px;
     }
     img{
         width: 120px;
         height: 60px;
         margin-left: 40px;
     }
     .bank-type{
         justify-content: flex-end;
         display: flex;
         flex: 1;
         align-self: center;
         padding-right: 20px;
     }
    
}
.describe .left{
    font-size: 24px;
     color: #8686E1;
    height: 60px;
}
.describe .right{
    font-size: 30px;
    color: #8686C0;
    height: 60px;
}
.describe .right img{
    margin-left: 8px;
    width: 24px;
    height: 24px;
    padding-bottom: 6px;
}
.mint-header {
    height: 100px;
    font-size: 32px;
    background-color: #222240 ;
    color: #E0E0F9;
}
.container .symbol .wait{
font-size: 26px;
    color: #E0E0F9;
   line-height: 60px
}
.container .symbol span{
height: 120px;
}
.container .symbol{
    padding: 40px 30px 40px 30px;
    height:202px;
    background:linear-gradient(90deg,#222240 0%,#222240 100%);
}
.container .symbol .type{
    font-size: 46px;
    color: #E0E0F9;
     line-height: 80px
}
.flex-between{
        justify-content: space-between;
        display: flex;
    }
.pay-tab .way-img{
    img{
        width: 140px;
        height: 50px;
        margin-left: 0px;
    }
    display: flex;
    justify-content: center;
    align-items: center;
       width: 120px;
    height: 60px;
    margin-left: 40px;
}
// .wei-pay{
//      border: 1px solid rgba(12,185,0,1);
// }
// .zfb-pay{
//      border: 1px solid rgba(18,185,219,1);
// }
// .bank-pay{
//      border: 1px solid rgba(255,200,86,1);
// }

</style>